let inp = document.querySelector('#inp');
let ul = document.querySelector('#ul');
let a = document.querySelector('.iup>a')
inp.oninput = function() {
    let key = this.value;

    let script = document.createElement('script');
    script.src = `https://suggest.taobao.com/sug?code=utf-8&q=${key}&extras=1&area=c2c&bucketid=atb_search&pid=mm_26632258_3504122_32538762&unid=&clk1=1fad8222a77ee4079bd26b9de8638f2c&_=1635158243300&callback=jsonp1`

    script.setAttribute('index', 'jsonp');
    let scriptAll = document.querySelectorAll('script');
    for (let i = 0; i < scriptAll.length; i++) {
        if (scriptAll[i].getAttribute('index') == 'jsonp') {
            document.body.removeChild(scriptAll[i]);
        }
    }
    window.jsonp1 = function(res) {
        let str = '';
        if (res.result) {
            res.result.forEach(item => {
                str += `<li>${item[0]}</li>`
            })
            ul.innerHTML = str;
            ul.style.display = 'block';
            ul.style.border = '1px solid #ccc';
            document.body.removeChild(script);
        } else {
            ul.innerHTML = '';
            ul.style.display = 'none';
        }
    }
    document.body.appendChild(script);
}
inp.onblur = function() {
    ul.style.display = 'none';
}
a.onclick = () => {
        inp.value = ''
    }
    /******************************************* */

$('#a1').mouseenter(() => {
    $('.jd').css({ display: 'block' })
})
$('#a1').mouseleave(() => {
        $('.jd').css({ display: 'none' })
    })
    /******************************************/
$(".tc").click(function() {

        location.href = "./jing-gouwu.html";
    })
    /******************************************/
let username = getCookie('username');
if (!username) { // 未登录
    $('.ne').html(`<a href="./jing-denlu.html">你好，请登入</i></a>`)
    $('.na').html(`<a href="./jing-zhuce.html">免费注册</a>`)
} else {
    $(window).ready(function() {
        console.log(getCookie(username))
            // console.log(decodeURIComponent(username)) //解决中文乱码
        $('.ne').html(`欢迎${decodeURIComponent(username)}`)
        $('.ne').css({ 'margin-right': '20px' })
        $('.na').html(`退出登入`)
            // 实现点击退出
            //  删除cookie中的键名为username的值就可以退登录
        $('.na').click(function() {
            delCookie('username');
            delCookie('rememberusername');
            location.reload();
        })
    })
}
/******************************************/
layui.use(['laypage', 'layer'], function() {
    var laypage = layui.laypage,
        layer = layui.layer;

    // 发起ajax请求
    function getList() {
        let data = ''
        $.ajax({
            url: './php/list.php',
            // async: false,
            dataType: 'json',
            success(res) {
                // let { data } = res; // 解构赋值
                data = res.data


                //调用分页
                laypage.render({
                        elem: 'demo11',
                        count: data.length,
                        limit: 10,
                        limits: [5, 10, 15],
                        layout: ['count', 'prev', 'page', 'next', 'limit'],
                        jump: function(obj) {
                            // console.log(obj);
                            //模拟渲染
                            document.querySelector('.xy-3').innerHTML = function() {
                                var arr = [],
                                    thisData = data.concat().splice(obj.curr * obj.limit - obj
                                        .limit, obj.limit);
                                layui.each(thisData, function(index, item) {
                                    arr.push(
                                        `
        <div class="gl-i-wrap">
            <img width="220" height="220" src="${item.img.split('==========')[0]}" data-id=${item.id}>
        <strong class="J_59091132334">
        <em>￥</em><i data-price="59091132334">${item.price}</i>
        </strong><br>
        <em class="em-e"> ${item.text}</em><br>
        <i class="promo-words" id="J_AD_59091132334">11.11开门红预售盛典，31号付尾款</i>
        <span class="sp-p"><i>1万+</i>条评价</span>
        <div class="p-shop">
            <img src="//img12.360buyimg.com/schoolbt/jfs/t1/80828/19/2993/908/5d14277aEbb134d76/889d5265315e11ed.png" width="73" height="16">
            <span>微星旗舰店 <i class="iconfont icon-kefu"></i></span>
        </div>
        <div class="p-icons">
            <i class="goods-icons4">券4980-600</i>
            <i class="goods-icons4">赠</i>
        </div>
        <div class="p-operate">
            <a class="p-o-btn "><i class="iconfont icon-24gl-square"></i>对比</a>
            <a class="p-o-btn "><i class="iconfont icon-aixin"></i>关注</a>
            <a class="p-o-btn "><i class="iconfont icon-daojishi"></i>参与抢购</a>
        </div>
        </div>
        
        <div>
        
        </div>
        `)

                                });
                                // console.log(arr.join(''));
                                return arr.join('');
                            }();
                        }
                    })
                    // 给列表页的.list的div绑定点击事件，帮ul中的li的a标签
                $('.xy-3').on('click', function(e) {
                    // 判断点击的是否是IMG标签
                    if (e.target.nodeName === 'IMG') {
                        // 将商品的id存储在sessionStorage
                        console.log(e.target.dataset);
                        sessionStorage.setItem('goodsId', e.target.dataset.id);
                        // 跳转至详情页面
                        location.href = "./jing-fdj.html";
                    }
                    // return false
                })
            }
        })
    }
    getList()

});
    /********************************************************** */
    $(".tc2").click(function() {
        location.href = "./jing-gouwu.html";
        return false
    })
// /*/************************************* */